<template>
	<view class="login">
		<view class="bar-height"></view>
		<image class="icon-close" @click="close" src="../../static/images/icon-close-black.png"></image>
		<view class="main">
			<view class="title">
				手机号登录
			</view>
			<view class="list">
				<view class="left">
					+86
				</view>
				<view class="line"></view>
				<input class="ipt" v-model="phone"  placeholder="请输入手机号码" />
			</view>
			<view class="list">
				<input class="ipt" v-model="smsCode"  placeholder="请输入验证码" />
				<view class="line"></view>
				<button class="send" @click="send" :disabled="disableCode">{{sendTips}}</button>
			</view>
			<button class="btn" @click="login">登录/注册</button>
			<text>注：未注册的手机号登录后，自动注册</text>
		</view>
	</view>
</template>

<script setup>
let severUrl=getApp().globalData.severUrl
import { ref } from 'vue';
//手机号
let phone=ref("")
//验证码
let smsCode=ref("")
let sendTips=ref("发送验证码")
let disableCode=ref(false)
let time=60
//发送验证码
const send=()=>{
	if(phone.value!==""&&phone.value.length===11){
		let timer=setInterval(()=>{
			sendTips.value=time+"s"
			disableCode.value=true
			time--
			if(time<=0){
				clearInterval(timer)
				sendTips.value="发送验证码"
				disableCode.value=false
				time=60
			}
		},1000)
		uni.request({
			url:severUrl+"passport/getSMSCode",
			method:"POST",
			header:{
				"content-type":"application/x-www-form-urlencoded"
			},
			data:{
				mobile:phone.value
			},
			success(result) {
				if(result.data.status==200){
					uni.showToast({
						title:result.data.msg
					})
				}else{
					uni.showToast({
						title:result.data.msg
					})
				}
			}
		})
	}else{
		uni.showToast({
			title:"手机号不正确"
		})
	}
	
}
//登录
const login=()=>{
	if(smsCode.value===""){
		uni.showToast({
			title:"验证码不能为空"
		})
		return
	}
	uni.request({
		url:severUrl+"passport/login",
		method:"POST",
		data:{
			mobile:phone.value,
			smsCode:smsCode.value
		},
		success(result) {
			if(result.data.status==200){
				uni.setStorageSync("userToken",result.data.data.userToken)
				uni.setStorageSync("userId",result.data.data.id)
				uni.navigateBack()
			}else{
				uni.showToast({
					title:result.data.msg
				})
			}
		}
	})
}
const close=()=>{
	uni.navigateBack({
		delta:1
	})
}
</script>

<style scoped lang="scss">
.login{
	background-color: #fff;
	height: 100vh;
	color:#000;
	.icon-close{
		width: 60rpx;
		height: 60rpx;
	}
	.bar-height{
		height: var(--status-bar-height);
	}
	.main{
		margin-top: 200rpx;
		padding:0 20rpx;
		.title{
			font-size: 50rpx;
		}
		.list{
			display: flex;
			border-bottom: 1px solid #eee;
			padding: 10rpx 0;
			align-items: center;
			.line{
				height: 64rpx;
				width: 1px;
				background-color: #eee;
				margin-left: 10rpx;
				margin-right: 10rpx;
				
			}
			.ipt{
				height: 64rpx;
			}
			.send{
				width: 260rpx;
				border-radius: 40rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #00ff00;
				font-size: 32rpx;
				color:#fff;
				
			}
			.send:after{
				border:none;
			}
			
		}
		.btn{
			background-color: #fe0000;
			color:#fff;
			border-radius: 30rpx;
			margin:20rpx 0;
		}
	}
}
</style>
